<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left"></view>
				<view class="title_bar_center"></view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="switch_info">
			<view class="switch_info_le"></view>
			<view class="switch_info_ri flex align-center" @tap.stop="openAccount" v-if="accountList.length > 0">
				<image :src='STATIC_URL+"48.png"' mode=""></image>
				<text class="title_short_name" v-if="subAccount.short_name">{{subAccount.short_name}}</text>
				<text class="title_short_name" v-else>切换</text>
			</view>
		</view>
		
		<view class="user_info" v-if="!token" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/login/login`">
			<view class="user_info_left">
				<image :src='STATIC_URL+"47.png"' mode=""></image>
			</view>
			<view class="user_info_right" >
				<view class="user_info_right_1">
					<text>未登录</text>
				</view>
				<!-- <view class="user_info_right_2" v-if="token">{{userInfo.phone}}</view> -->
			</view>
		</view>
		<view class="user_info" v-else @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/info`">
			<view class="user_info_left">
				<image :src='STATIC_URL+"47.png"' mode=""></image>
			</view>
			<view class="user_info_right" >
				<view class="user_info_right_1">
					<text>{{userInfo.name}}</text>
				</view>
				<view class="user_info_right_2">{{userInfo.phone}}</view>
			</view>
		</view>
		<view class="order">
			<view class="order_info">
				<view class="order_info_title" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/order?current=0`">
					<view class="order_info_title_1">我的订单</view>
					<view class="order_info_title_2">
						<text>全部订单</text>
						<u-icon name="arrow-right" color="rgba(61,61,61,0.5)" size="24"></u-icon>
					</view>
				</view>
				<view class="order_info_content">
					<view class="order_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/order?current=1&order_status=0`">
						<view class="order_info_content_item_1">
							<image :src='STATIC_URL+"21.png"' mode="aspectFill"></image>
						</view>
						<view class="order_info_content_item_2">待受理</view>
						<view class="order_num" v-if="num1 > 0">{{num1}}</view>
					</view>
					<view class="order_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/order?current=2&order_status=1`">
						<view class="order_info_content_item_1">
							<image :src='STATIC_URL+"23.png"' mode="aspectFill"></image>
						</view>
						<view class="order_info_content_item_2">待收货</view>
						<view class="order_num" v-if="num2 > 0">{{num2}}</view>
					</view>
					<!-- <view class="order_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/order?current=3&order_status=2`">
						<view class="order_info_content_item_1">
							<image :src='STATIC_URL+"22.png"' mode="aspectFill"></image>
						</view>
						<view class="order_info_content_item_2">待收货</view>
					</view> -->
					<view class="order_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/order?current=5&order_status=5`">
						<view class="order_info_content_item_1">
							<image :src='STATIC_URL+"24.png"' mode="aspectFill"></image>
						</view>
						<view class="order_info_content_item_2">已取消</view>
					</view>
					<view class="order_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/order?current=6&order_status=4`">
						<view class="order_info_content_item_1">
							<image :src='STATIC_URL+"25.png"' mode="aspectFill"></image>
						</view>
						<view class="order_info_content_item_2">已完成</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="tool">
			<view class="tool_info">
				<view class="tool_info_title">
					<view class="tool_info_title_1">我的服务</view>
					<view class="tool_info_title_2"></view>
				</view>
				<view class="tool_info_content">
					<view class="tool_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/myCollect`">
						<view class="tool_info_content_item_1">
							<image :src='STATIC_URL+"26.png"' mode="aspectFill"></image>
						</view>
						<view class="tool_info_content_item_2">
							我的收藏
						</view>
					</view>
					<view class="tool_info_content_item"  @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/myAddress`">
						<view class="tool_info_content_item_1">
							<image :src='STATIC_URL+"27.png"' mode="aspectFill"></image>
						</view>
						<view class="tool_info_content_item_2">
							收货地址
						</view>
					</view>
					<view class="tool_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/order?current=7&order_status=7`">
						<view class="tool_info_content_item_1">
							<image :src='STATIC_URL+"28.png"' mode="aspectFill"></image>
						</view>
						<view class="tool_info_content_item_2">
							退货订单
						</view>
					</view>
					<view class="tool_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/changeLoginPsd`">
						<view class="tool_info_content_item_1">
							<image :src='STATIC_URL+"29.png"' mode="aspectFill"></image>
						</view>
						<view class="tool_info_content_item_2">
							修改密码
						</view>
					</view>
				</view>
				
				<view class="tool_info_content" style="margin-top: 48rpx;">
					<view class="tool_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/inventory`">
						<view class="tool_info_content_item_1">
							<image :src='STATIC_URL+"51.png"' mode="aspectFill"></image>
						</view>
						<view class="tool_info_content_item_2">
							库存管理
						</view>
					</view>
					<view class="tool_info_content_item" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/login/instructions`">
						<view class="tool_info_content_item_3">
							<image :src='STATIC_URL+"49.png"' mode="aspectFill"></image>
						</view>
						<view class="tool_info_content_item_4">
							使用说明
						</view>
					</view>
				</view>
				<!-- <view class="tool_info_content">
					<view class="tool_info_content_item margin-32" @tap.stop="openAccount">
						<view class="tool_info_content_item_1">
							<image src="/static/index/16.png" mode=""></image>
						</view>
						<view class="tool_info_content_item_2">
							帮好友开账户
						</view>
					</view>
					<view class="tool_info_content_item margin-32" @tap.stop="myTeam">
						<view class="tool_info_content_item_1">
							<image src="/static/index/17.png" mode=""></image>
						</view>
						<view class="tool_info_content_item_2">
							我的团队
						</view>
					</view>
					<view class="tool_info_content_item margin-32" @tap.stop="getCall">
						<view class="tool_info_content_item_1">
							<image src="/static/index/18.png" mode=""></image>
						</view>
						<view class="tool_info_content_item_2">
							联系推荐人
						</view>
					</view>
					<view class="tool_info_content_item margin-32" @tap.stop="getRank">
						<view class="tool_info_content_item_1">
							<image src="/static/index/19.png" mode=""></image>
						</view>
						<view class="tool_info_content_item_2">
							排行榜
						</view>
					</view>
					<view class="tool_info_content_item" @tap.stop="goQrcode">
						<view class="tool_info_content_item_1">
							<image src="/static/index/20.png" mode=""></image>
						</view>
						<view class="tool_info_content_item_2">
							我的二维码
						</view>
					</view>
					<view class="tool_info_content_item" @tap.stop="goSet">
						<view class="tool_info_content_item_1">
							<image src="/static/index/21.png" mode=""></image>
						</view>
						<view class="tool_info_content_item_2">
							设置
						</view>
					</view>
					<button open-type="contact" class="tool_info_content_item">
						<view class="tool_info_content_item_1">
							<image src="/static/index/22.png" mode=""></image>
						</view>
						<view class="tool_info_content_item_2">
							客服
						</view>
					</button>
				</view> -->
				
			</view>
		</view>
		
		<!-- <u-modal v-model="show" :content="content" :show-cancel-button="true" confirm-color="#0278FC" @confirm="phoneConfirm"></u-modal> -->
		
		<u-popup v-model="show" mode="bottom" border-radius="28">
			<view class="account_pop">
				<view class="account_title">
					选择子账号
				</view>
				<scroll-view class="account_list" :scroll-y="true">
					<view class="account_item" v-for="(item, index) in accountList" :key="index"
						@tap.stop="selectAccount(item)">
						<view class="account_item_text flex align-center">
							<text>{{item.name}}</text>
							<text v-if="item.short_name" class="short_name">({{item.short_name}})</text>
						</view>
						<image v-if="customer_id == item.customer_id" class="account_item_icon"
							:src='STATIC_URL+"2.png"'></image>
						<image v-else class="account_item_icon" :src='STATIC_URL+"3.png"'></image>
					</view>
				</scroll-view>
				<view class="account_btn">
					<view class="account_btn_1" @tap.stop="cancleAccount">取消</view>
					<view class="account_btn_2" @tap.stop="confirmAccount">确定</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				content: '确定要拨打推荐人电话吗？',
				token: "",
				num1: 0,
				num2: 0,
				is_admin: 0, // 1有子账号  2无
				accountList: [], // 子账号列表
				show: false,
				customer_id: "", // 子账号id
				subAccount: "",
				selectAccountInfo: "",
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.token = global.token;
			if (this.token) {
				this.getUserInfo();
				this.getOrderNum();
				
				this.subAccount = uni.getStorageSync('subAccount');
				if (this.subAccount) {
					this.customer_id = this.subAccount.customer_id;
					this.getAccountList(global.mainUserinfo.id);
				}
			}
		},
		onHide() {
			this.show = false;
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getUserInfo();
			this.getOrderNum();
		},
		methods: {
			// 获取用户资料  postUserInfo
			getUserInfo() {
				this.$api.post(global.apiUrls.glyUser, {
					
				}).then(res => {
					// console.log(res);
					if (res.data.code == 200) {
						this.userInfo = res.data.data;
						this.$store.commit('updateUserInfo', res.data.data);
						this.is_admin = res.data.data.is_admin;
						if (res.data.data.is_admin == 1) {
							this.$store.commit('updateMainUserInfo', res.data.data);
							this.customer_id = res.data.data.id;
							this.getAccountList(res.data.data.id);
						}
					} else {
						this.$message.info(res.data.message);
					}
				})
			},
			// 获取子账号列表
			getAccountList(id) {
				this.$api.get(global.apiUrls.gylSubAccount, {
					parent_customer_id: id
				}).then(res => {
					// console.log(res);
					if (res.data.code == 200) {
						this.accountList = res.data.data;
						let subItem = this.$store.state.mainUserinfo;
						this.accountList.unshift({
							customer_id: subItem.id,
							id: subItem.id,
							name: subItem.name,
							phone: subItem.phone,
							short_name: ""
						})
					} else {
						this.$message.info(res.data.message);
					}
				})
			},
			// 打开子账号列表
			openAccount() {
				this.show = true;
			},
			// 选择子账号
			selectAccount(item) {
				this.selectAccountInfo = item;
				this.customer_id = this.selectAccountInfo.customer_id;
			},
			// 确认选择子账号
			confirmAccount() {
				this.show = false;
				this.$api.post(global.apiUrls.gylEditAccount, {
					customer_id: this.selectAccountInfo.customer_id ? this.selectAccountInfo.customer_id : this.customer_id
				}).then(res => {
					// console.log(res);
					this.$message.info(res.data.message);
					if (res.data.code == 200) {
						this.$store.commit('updateToken', res.data.data.token);
						uni.setStorageSync('subAccount', this.selectAccountInfo);
						this.subAccount = this.selectAccountInfo;
						this.$store.commit('clearCart', []);
						this.getUserInfo();
						this.getOrderNum();
					}
				})
			},
			// 取消选择子账号
			cancleAccount() {
				this.show = false;
			},
			
			phoneConfirm() {
				let _this = this;
				uni.makePhoneCall({
					phoneNumber: _this.userInfo.pid_mobile //仅为示例
				});
			},
			// 获取订单数量  glyOrderNum
			getOrderNum() {
				this.$api.get(global.apiUrls.glyOrderNum, {
					
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 200) {
						this.num1 = res.data.data[0].count;
						this.num2 = res.data.data[1].count;
					} else {
						this.$message.info(res.data.message);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.switch_info {
		display: flex; 
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		margin-top: 16rpx;
		opacity: 0.8;
		.switch_info_le {
			
		}
		.switch_info_ri {
			image {
				width: 32rpx;
				height: 32rpx;
			}
			
			.title_short_name {
				font-size: 28rpx;
				color: #fff;
				margin-left: 8rpx;
			}
		}
	}
	.account_pop {
		.account_title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			padding: 28rpx 0;
		}
	
		.account_list {
			padding: 0 28rpx;
			height: 360rpx;
	
			.account_item {
				padding: 16rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.account_item_text {
					font-size: 30rpx;
					font-weight: 500;
				}
	
				.short_name {
					font-size: 28rpx;
					color: #999;
					margin-left: 5rpx;
				}
	
				.account_item_icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	
		.account_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 28rpx;
	
			.account_btn_1 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				font-size: 30rpx;
			}
	
			.account_btn_2 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #41AF36;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
	.page {
		background: url(https://www.shiyaocanyin.com/images/8.png) no-repeat #f5f5f5;
		background-size: 100% auto !important;
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
					color: #fff;
				}
		
				.title_bar_right {}
			}
		}
		.user_info {
			display: flex;
			padding: 40rpx 40rpx 0;
			.user_info_left {
				width: 110rpx;
				height: 110rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.user_info_right {
				width: calc(100% - 120rpx);
				padding: 8rpx 0 0 20rpx;
				.user_info_right_1 {
					margin-bottom: 8rpx;
					font-weight: 500;
					font-size: 42rpx;
					color: #3D3D3D;
					display: flex;
					align-items: center;
					image {
						width: 106rpx;
						height: 27rpx;
						margin-left: 14rpx;
					}
				}
				.user_info_right_2 {
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(61,61,61,0.5);
				}
			}
		}
		.income {
			margin-top: 42rpx;
			padding: 0 57rpx;
			display: flex;
			.income_item {
				width: 50%;
				text-align: center;
				.income_item_1 {
					font-size: 42rpx;
					margin-bottom: 16rpx;
				}
				.income_item_2 {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
		.order {
			padding: 50rpx 20rpx 0;
			margin-bottom: 20rpx;
			.order_info {
				background: #fff;
				border-radius: 10rpx;
				padding: 20rpx 30rpx 40rpx;
				.order_info_title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 40rpx;
					.order_info_title_1 {
						font-weight: 500;
						font-size: 32rpx;
						color: #3D3D3D;
					}
					.order_info_title_2 {
						font-weight: 500;
						font-size: 24rpx;
						color: rgba(61,61,61,0.5);
						text {
							margin-right: 8rpx;
						}
					}
				}
				.order_info_content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.order_info_content_item {
						text-align: center;
						position: relative;
						.order_info_content_item_1 {
							width: 70rpx;
							height: 70rpx;
							margin: 0 auto;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.order_info_content_item_2 {
							margin-top: 2rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #3D3D3D;
						}
						.order_num {
							width: 30rpx;
							height: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 22rpx;
							border-radius: 50%;
							background: red;
							color: #fff;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}
		}
		.tool {
			padding: 0 20rpx;
			.tool_info {
				background: #fff;
				border-radius: 10rpx;
				padding: 20rpx 0 40rpx;
				.tool_info_title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					padding: 0 30rpx;
					.tool_info_title_1 {
						font-weight: 500;
						font-size: 32rpx;
						color: #3D3D3D;
					}
					.tool_info_title_2 {
						font-size: 24rpx;
						color: #999;
						text {
							margin-right: 12rpx;
						}
					}
				}
				.tool_info_content {
					overflow: hidden;
					.tool_info_content_item {
						float: left;
						width: 25%;
						text-align: center;
						padding: 0;
						// margin: 0 0 12rpx;
						background: #fff;
						
						
						.tool_info_content_item_1 {
							width: 100rpx;
							height: 100rpx;
							margin: 0 auto;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.tool_info_content_item_2 {
							font-weight: 400;
							font-size: 24rpx;
							color: #3D3D3D;
						}
						.tool_info_content_item_3 {
							width: 66rpx;
							height: 66rpx;
							margin: 0 auto;
							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}
						.tool_info_content_item_4 {
							font-weight: 400;
							font-size: 24rpx;
							color: #3D3D3D;
							margin-top: 32rpx;
						}
					}
					.tool_info_content_item::after {
						border: none;
					}
				}
				.margin-32 {
					margin-bottom: 32rpx;
				}
			}
		}
	}
</style>